<template>
  <div>
    <div class="fl-alc" style="width: 33%">
      <img src="../assets/images/horn.png" alt />
      <vue-seamless-scroll
        :data="List"
        class="seamless-warp"
        :class-option="optionSingleHeightTime"
      >
        <!-- 在需要添加点击事件的元素上绑定 :data-obj="JSON.stringify(item)" 否则事件无法触发且会抱错 -->
        <div
          class="item"
          v-for="(item, index) in List"
          :key="index"
          :data-obj="JSON.stringify(item)"
        >
          <span
            @click="clickProps($event)"
            :data-obj="JSON.stringify(item)"
            class="mr-20 pointer"
            >{{ item }}</span
          >
        </div>
      </vue-seamless-scroll>
    </div>
    <el-dialog
      v-if="contentVisible"
      title="更新记录"
      :visible.sync="contentVisible"
      width="660px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      center
      style="z-index: 100"
      :modal="false"
    >
      <div v-for="(item, index) in contentList" :key="index">
        <div>{{ index + 1 }}、{{ item.content }}</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "test",
  components: {
    vueSeamlessScroll,
  },
  computed: {
    optionSingleHeightTime() {
      return {
        step: 0.8, // 数值越大速度滚动越快
        limitMoveNum: 2,
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  data() {
    return {
      List: [],
      contentVisible: false,
      contentList: [],
    };
  },
  filters: {},
  created() {
    this.getData();
    window.eventBus.$on("setFeaturesData", () => {
      // 不带参数
      this.getData();
    });
  },
  mounted() {},
  methods: {
    getData() {
      let params = {
        page: 1,
        limit: 10,
      };
      this.$get("/systemsetup/systemsetup/renewInfoListPage", params).then(
        (res) => {
          this.contentList = res.data.records;
          const { version, content } = res.data.records[0];
          this.List = [`当前系统已升级至版本${version}`];
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    //无限滚动无法获取复制dom的事件 用此方法
    clickProps(e) {
      // let item = JSON.parse(e.target.dataset.obj);
      this.showDetail();
    },
    showDetail() {
      this.$router.push("/settingUpdateContent?type=1");
    },
  },
};
</script>

<style scoped lang="less">
.seamless-warp {
  // height: .1875rem;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.0938rem;
  user-select: none;
}
.item {
  //   margin: 10px;
  //   margin-right: 30px;
  display: inline-block;
  height: 100% !important;
}
img {
  width: 0.125rem;
  height: 0.125rem;
  margin-right: 0.0625rem;
}
</style>
